5. Selector

5.1 Selector overview

It's inspired by the jsoup

The select method is injected to Component,which returns a list of Component.

View code

<z:window id="window" apply="MyComposer">
    <z:textbox name="t1" value="value1"/>
    <z:textbox id="t2" value="value2"/>
    <z:textbox value="value3"/>
</z:window>

Composer code

class MyComposer{
    def afterCompose = {Component window ->
        assert 3 == window.select("textbox").size() // select method returns List<Component>
        assert "value2" == window.select("#t2")[0].value
        assert "value1" == window.select("textbox[name=t1]")[0].value
    }
}

5.2 Base Selector

• tagname: find components by tag, e.g. textbox
• #id: find components by ID, e.g. #compId
• .class: find components by class name, e.g. .masthead
• [attribute]: components with attribute, e.g. [href]
• [^attr]: components with an attribute name prefix, e.g. [^lab]
• [attr=value]: components with attribute value, e.g. [width=500]
• [attr^=value], [attr$=value], [attr*=value]: components with attributes that start with, end with, or contain the value, e.g. [href*=/path/]
• [attr~=regex]: components with attribute values that match the regular expression; e.g. img[src~=(?i).(png|jpe?g)]
• *: all components, e.g. *

5.3 Selector combinations

• el#id: components with ID, e.g. textbox#compId
• el.class: components with class, e.g. textbox.masthead
• el[attr]: components with attribute, e.g. a[href]
• Any combination, e.g. a[href].highlight
• ancestor child: child components that descend from ancestor, e.g. .body textbox finds textbox components anywhere under a block with class "body"
• parent > child: child components that descend directly from parent, e.g. window.content > textbox finds textbox components; and window > * finds the direct children of the window tag
• siblingA + siblingB: finds sibling B element immediately preceded by sibling A, e.g. div.head + div
• siblingA ~ siblingX: finds sibling X element preceded by sibling A, e.g. intbox ~ textbox
• el, el, el: group multiple selectors, find unique components that match any of the selectors; e.g. div.masthead, div.logo

5.4 Pseudo selectors

• :lt(n): find components whose sibling index (i.e. its position in the component tree relative to its parent) is less than n; e.g. listitem:lt(3)
• :gt(n): find components whose sibling index is greater than n; e.g. div label:gt(2)
• :eq(n): find components whose sibling index is equal to n; e.g. window textbox:eq(1)
• :has(seletor): find components that contain components matching the selector; e.g. div:has(label)
• :not(selector): find components that do not match the selector; e.g. div:not(.logo)